
<div class="flex flex-row m-4">
  <div class="basis-1/5">
    <p-card header="部门列表">
      <p-tree [value]="dl"  selectionMode="single" [(selection)]="selectedNode" [contextMenu]="cm"
              (onNodeSelect)="nodeSelect($event)"
      />
      <p-contextmenu #cm [model]="menulist"></p-contextmenu>
    </p-card>
  </div>
  <div class="basis-4/5">
    <p-card>

      <ng-template pTemplate="header">
        用户列表
      </ng-template>

      <ng-template pTemplate="title" >
      <p-button label="添加" [disabled]="selectedNode==null" ></p-button>
      </ng-template>


      <p-table [value]="ml"
               [paginator]="true"
               [rows]="10"
               [showCurrentPageReport]="true"
      >
        <ng-template #header>
          <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>部门</th>
            <th>真实姓名</th>
            <th>用户组</th>
            <th>状态</th>
            <th>使用期限</th>
            <th>操作</th>
          </tr>
        </ng-template>
        <ng-template #body let-data let-rowIndex="rowIndex">
          <tr>
            <td>{{rowIndex+1}}</td>
            <td>{{data.name}}</td>
            <td>{{data.dept}}</td>
            <td>{{data.realname}}</td>
            <td>{{data.rolegroup}}</td>
            <td>{{data.state | memberstate}}</td>
            <td>{{data.duedate | duedate}}</td>
            <td></td>
          </tr>
        </ng-template>
        <ng-template pTemplate="footer" pStyleClass="float-end"><p >合计 {{ ml.length }} 条.</p>  </ng-template>
      </p-table>
    </p-card>
  </div>
</div>
